<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>屏幕解锁密码重置功能</title>
		<link rel="stylesheet" type="text/css" href="css/lock.css"/>
		
	</head>
	<body>
		<div class="content">
			<nav>
				<ul class="circle">
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</nav>
			<header>
				<div class="computed" id="computed"></div>
				<div class="result" id="result">0</div>
				<div class="line"></div>
			</header>
			<section>
				<ul>  
					<li><a href="javascript:getNumber(7)" class="black">7</a></li>
					<li><a href="javascript:getNumber(8)" class="black">8</a></li>
					<li><a href="javascript:getNumber(9)" class="black">9</a></li> 
				 
					<li><a href="javascript:getNumber(4)" class="black">4</a></li>
					<li><a href="javascript:getNumber(5)" class="black">5</a></li>
					<li><a href="javascript:getNumber(6)" class="black">6</a></li> 
					
					<li><a href="javascript:getNumber(1)" class="black">1</a></li>
					<li><a href="javascript:getNumber(2)" class="black">2</a></li>
					<li><a href="javascript:getNumber(3)" class="black">3</a></li> 
					
					<li><a href="#" class="black">0</a></li> 
					<li><a href="#" id="equals">确定</a></li> 
				</ul>
			</section>
		</div>
	</body>
	<script type="text/javascript">
		 const btn = document.getElementById("equals")
		 const result = document.getElementById("result")
		 const computed = document.getElementById("computed")
		 let password = ''
		 let repassword = ''
		 let firstInput = true;
		 
		 btn.addEventListener('click',function(e){
			 console.log(password,repassword);
			 if(this.innerText == '重置' && password == repassword) {
				 alert("重置成功!"); 
				 window.location.reload()
			 }else if(this.innerText == '重置'){
				 alert("失败!两次密码不一致,请重新输入");  
				 window.location.reload()
			 }
		 	 this.innerText = '重置'
			 firstInput = false;
		 })
		 
		 function getNumber(n) {
			 if(firstInput) {
				 password += n;
				 if(password.length > 6) {
					 alert('密码不得超过6位数')
					 return;
				 }
				 computed.innerText = password;
			 } else {
				 repassword += n; 
				 if(repassword.length > 6) {
					 alert('重复密码不得超过6位数')
					 return;
				 }
				 result.innerText = repassword.replace(/[0-9]/g,'*');
			 } 
		 }
	</script>
</html>
